<template>
  <div id="main3" style="width:100%;height:100%"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: 'threeEcharts',
  data() {
    return {
      option: {
        title: {
          text: '交易数据',
          top: '8px',
          left: '10px',
          textStyle: {
            color: '#191e24',
            fontSize: '14'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },

        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [100, 300, 700, 500, 550, 450, 500, 400, 450, 400, 340, 400, 300],
            type: 'line',
            smooth: true,
            showSymbol: false,
            areaStyle: {
              opacity: 0.3,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(29, 104, 255)'
                },
                { offset: 0.7, color: 'rgba(243, 247, 255)' },
                {
                  offset: 1,
                  color: 'rgb(255,255,255)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            }
          }
        ]
      }
    }
  },
  mounted() {
    var myChart = echarts.init(document.getElementById('main3'))
    this.option && myChart.setOption(this.option)
  }
}
</script>

<style>
</style>